<!--
job-quant
工作量化追踪
-->
<template>
    <div class="job-quanti">
        <div
        v-for="(item, index) in allQuants"
        :key="index"
        class="job-quanti-block">
            <div class="titles-block">
                <div class="chart-title">
                    {{ item.name }}
                </div>
            </div>
            <div class="charts">
                <chart
                :chartId="`jtChart${index}`"
                :options="getChart1Option(index)"
                ></chart>
            </div>
        </div>
    </div>
</template>

<script>
import {
    getQuants, // 获取工作量化追踪数据接口
} from '@/apis';
import {
    chartFontSize,
} from '@/mixins';

export default {
    name: 'job-quant',
    mixins: [chartFontSize],
    components: {
        chart: () => import(/* webpackChunkName: "chart" */'@/components/chart'),
    },
    data() {
        return {
            // 工作量化所有数据
            allQuants: [],
        };
    },
    methods: {
        // 获取echarts的配置项目
        getChart1Option(id) {
            const {
                size01,
            } = this;
            const {
                max,
                val,
            } = this.allQuants[id];
            return {
                series: [
                    {
                        type: 'gauge',
                        radius: '86%',
                        min: 0,
                        max: max <= 0 ? 100 : max,
                        progress: {
                            show: true,
                            width: 12 * size01,

                        },
                        axisLine: {
                            lineStyle: {
                                width: 12 * size01,
                                color: [[1, '#1F4AA5']],
                            },
                        },
                        axisTick: {
                            show: true,
                            distance: -18 * size01,
                            length: 2 * size01,
                            splitNumber: 2 * size01,
                            lineStyle: {
                                width: 6 * size01,
                                color: '#173c85',
                            },
                        },
                        splitLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: false,
                        },
                        anchor: {
                            show: false,
                            showAbove: true,
                            size: 25,
                            itemStyle: {
                                borderWidth: 10,
                            },
                        },
                        pointer: {
                            show: false,
                        },
                        title: {
                            show: false,
                        },
                        detail: {
                            valueAnimation: true,
                            width: '60%',
                            lineHeight: 40 * size01,
                            offsetCenter: [0, '5%'],
                            fontSize: 20 * size01,
                            color: '#48a5f6',
                            fontWeight: 'bolder',
                            formatter: '{value}',
                        },
                        data: [
                            {
                                value: val,
                                itemStyle: {
                                    color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                        { offset: 0, color: '#39b6ff' },
                                        { offset: 0.5, color: '#2684bf' },
                                        { offset: 1, color: '#1b4389' },
                                    ]),
                                },
                            },
                        ],
                    },
                    {
                        type: 'gauge',
                        radius: '49%',
                        axisLabel: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                        axisLine: {
                            lineStyle: {
                                width: 4 * size01,
                                color: [[1, '#0c2e78']],
                            },
                        },
                    },
                ],
                title: {
                    show: false,
                    text: '广州南',
                    textAlign: 'center',
                    bottom: '0',
                    left: '45%',
                    textStyle: {
                        color: '#fff',
                        fontSize: 14 * size01,
                    },
                },
            };
        },

        // 获取工作量化追踪数据
        getJobQuant() {
            getQuants().then((res) => {
                const {
                    data,
                    code,
                } = res.data;
                if (code === 200) {
                    this.allQuants = Object.entries(data).map((item) => ({
                        name: item[0],
                        max: item[1].split(',')[0],
                        val: item[1].split(',')[1],
                    }));
                }
            }).catch((err) => {
                window.console.log('获取工作量化追踪数据', err);
            });
        },
    },
    created() {
        this.getJobQuant();
    },
};
</script>
<style lang='scss' scoped>
.job-quanti {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 1rem 0 .556rem 0;
    overflow: hidden;

    &-block {
        width: 50%;
        height: 50%;
        float: left;

        .titles-block {
            width: 100%;
            height: .667rem;

            .chart-title {
                width: 2.556rem; // 92
                height: .667rem;
                color: #D6F4FF;
                line-height: .667rem;
                font-size: .389rem /* 14/80 */;
                text-align: center;
                background:url('../../assets/label.png') no-repeat center center;
                background-size: 100% 100%;
                margin: 0 auto;
            }
        }

        .charts {
            width: 100%;
            height: calc(100% - .667rem);
            box-sizing: border-box;
            padding: .33rem 0;
            .charts-left {
                width: 50%;
                height: 100%;
                float: left;
            }
        }

        &:last-child {
            .chart-title {
                width: 100%;
            }
        }
    }
}
</style>
